<template>
  <div class="box">
    <div class="top">
      <van-icon name="cross" size="20" @click="off" />
    </div>

    <div class="accountLog">
      <Account ref="account" v-if="showLoginMethod"></Account>
      <TelCode ref="telCode" v-else></TelCode>
    </div>
    <!-- <div><Account></Account></div> -->

    <div class="bottom">
      <div class="tips">
        <Tips ref="tips"></Tips>
      </div>

      <div class="btn">
        <van-button type="primary" size="large" @click="handlerLogin" color="rgb(83, 198, 223)">登录</van-button>
      </div>
      <div class="otherLogin">
        <p style="margin-bottom: 10px;">切换其他登录方式</p>
        <div class="logimg">
          <p>
            <img src="https://img1.baidu.com/it/u=3554391076,2346009213&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=305">
            微信登录
          </p>
          <p><img src="https://img0.baidu.com/it/u=829309475,2841958997&fm=253&fmt=auto&app=138&f=JPG?w=667&h=500"
              id="git" @click="gitLogin">
            git登录
          </p>

          <p>
            <img src="https://img1.baidu.com/it/u=556565059,3996987004&fm=253&fmt=auto&app=120&f=PNG?w=700&h=537" alt="">
            支付宝登录
          </p>
          <p @click="changeMethods" v-if="showLoginMethod">
            <img src="https://img1.baidu.com/it/u=2495756745,4071047505&fm=253&fmt=auto&app=138&f=JPEG?w=289&h=300"
              alt="">
            验证码登录
          </p>
          <p @click="changeMethods" v-else>
            <img src="https://img1.baidu.com/it/u=2495756745,4071047505&fm=253&fmt=auto&app=138&f=JPEG?w=289&h=300"
              alt="">
            密码登录
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { debounce, throttle } from "lodash";
import Tips from "@/views/login/tips";
import { Toast } from 'vant';
import Account from "@/views/login/account.vue"
import TelCode from "@/views/login/telCode.vue"
import axios from "axios"
import Login from "@/api/login.js"
// import request from "@/servives";
export default {
  components: {
    Tips,
    Account,
    TelCode
  },
  data() {
    return {
      showLoginMethod: true
    }
  },
  methods: {
    async handlerLogin() {
      if (this.$refs.tips.checked === false) {
        Toast({
          message: "请勾选协议通知",
          duration: 1000
        })
        return
      }
      if (this.showLoginMethod) {
        if (this.$refs.account.consumerId === "") {
          Toast({
            message: "请输入正确账号",
            duration: 1000
          })
          return
        }
        if (this.$refs.account.password === "") {
          Toast({
            message: "请输入密码",
            duration: 1000
          })
          return
        }
      } else {
        if (this.$refs.telCode.tel == "") {
          Toast({
            message: "请输入正确账号",
            duration: 1000
          })
          return
        }
        if (this.$refs.telCode.value == "") {
          Toast({
            message: "请输入验证码",
            duration: 1000
          })
          return
        }
        console.log(this.$refs.telCode.tel, this.$refs.telCode.value)
        axios({
          method: "POST",
          url: '/api/user/validate',
          data: {
            'consumerTel': this.$refs.telCode.tel,
            'identifying': this.$refs.telCode.value
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }).then(res => {
          console.log(res)
          this.$store.commit("SET_USER",res.data.data)
          console.log(this.$store.state.user)
          this.$router.push('/home')
        })
      }
    },
    off() {
      this.$router.go(-1)
    },
    changeMethods() {
      this.showLoginMethod = !this.showLoginMethod
    },
    gitLogin() {
      window.location.href = 'http://8.134.169.207:8000/user/oauth/render'
    }
  },
}
</script>





<style scoped lang="scss">
.box {
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(#cdfebe, #f8f8f8);

  .top {
    box-sizing: border-box;
    padding-top: 30px;
    padding-left: 30px;
    margin-bottom: 40px;
    height: 5px;
  }

  .accountLog {
    height: 60vh;
  }

  .btn {
    width: 100vw;
    margin: 0 auto;
    height: 100px;
    margin-top: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    .van-button {
      width: 150px;
      border-radius: 10px;
    }
  }

  .tips {
    width: 400px;
    margin: 0 auto;
  }

  .otherLogin {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logimg {
      width: 100vw;
      // margin: 0 auto;
      margin-top: 20px;
      display: flex;
      justify-content: space-evenly;

      p {
        width: 22vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: rgb(84, 85, 84)
      }

      img {
        width: 60px;
        height: 60px;
        border-radius: 60px;

      }
    }

  }

  .bottom {
    position: fixed;
    bottom: 7vh;
  }
}
</style>
